// 类组件
// import React,{Component} from 'react';
// import renderLabel from "./renderLabel";
// 函数组件
import React from 'react';

import styles from './uc-input.module.css';
import propTypes from 'prop-types';

//1. 受控和非受控
//2. 单行 和多行
//3. type/model/multi/label/style

// 类组件
// export default class UcInput extends Component{

//   static defaultProps={
//     type:'text',//类型
//     model:null,//双绑
//     multi:false,//多行
//     label:'',//描述
//     style:{}//行间样式
//   };

//   static propsTypes={
//     type: propTypes.string,
//     model: propTypes.shape({
//       name: propTypes.string.isRequired,
//       value: propTypes.string.isRequired,
//       onChange: propTypes.func.isRequired,
//     }),
//     multi:propTypes.bool,
//     label:propTypes.string,
//     style:propTypes.object
//   };

//   renderLabel=()=>{
//     let {label} = this.props;
//     return label ? <span>{label}</span> : null;
//   };

//   renderInput=()=>{
//     let {model,style,label,type} = this.props;


//     let el = null;

//     //非受控
//     if (!model){
//       el = (
//         <div className={styles.ucInput}>
//           <input
//             type={type}
//             defaultValue=""
//             style={{
//               paddingLeft: label ? '1.44rem' : '0.24rem',
//               ...style
//             }}
//           />
//           {this.renderLabel()}
//         </div>
//       );

//       return el;
//     }

//     //受控
//     let {name,value,onChange}=model;



//     el = (
//       <div className={styles.ucInput}>
//         <input
//           type={type}
//           style={{
//             paddingLeft: label ? '1.44rem' : '0.24rem',
//             ...style
//           }}

//           value={value}
//           name={name}
//           onChange={onChange}
//         />
//         {this.renderLabel()}
//       </div>
//     );

//     return el
//   };

//   renderTextArea=()=>{
//     let {model,label} = this.props;
//     let el = null;

//     //非受控

//     if (!model){
//       el = (
//         <div>
//           {renderLabel(label)}
//           <textarea></textarea>
//         </div>
//       );
//       return el;
//     }

//     //受控
//     let {name,value,onChange}=model;

//     el = (
//       <div>
//         {renderLabel(label)}
//         <textarea
//           value={value}
//           name={name}
//           onChange={onChange}
//         ></textarea>
//       </div>
//     );

//     return el;

//   };

//   render(){
//     let {multi} = this.props;
//     return multi ? this.renderTextArea() : this.renderInput()
//   }
// }

// 函数组件
function UcInput (props){
  // 函数方法
  const renderLabel=()=>{
    let {label} = props;
    return label ? <span>{label}</span> : null;
  };

  const renderInput=()=>{
    let {model,style,label,type} = props;


    let el = null;

    //非受控
    if (!model){
      el = (
        <div className={styles.ucInput}>
          <input
            type={type}
            defaultValue=""
            style={{
              paddingLeft: label ? '1.44rem' : '0.24rem',
              ...style
            }}
          />
          {renderLabel()}
        </div>
      );

      return el;
    }

    //受控
    let {name,value,onChange}=model;

    el = (
      <div className={styles.ucInput}>
        <input
          type={type}
          style={{
            paddingLeft: label ? '1.44rem' : '0.24rem',
            ...style
          }}

          value={value}
          name={name}
          onChange={onChange}
        />
        {renderLabel()}
      </div>
    );

    return el
  };

  const renderTextArea=()=>{
    let {model,label} = props;
    let el = null;

    //非受控

    if (!model){
      el = (
        <div>
          {renderLabel(label)}
          <textarea></textarea>
        </div>
      );
      return el;
    }

    //受控
    let {name,value,onChange}=model;

    el = (
      <div>
        {renderLabel(label)}
        <textarea
          value={value}
          name={name}
          onChange={onChange}
        ></textarea>
      </div>
    );

    return el;

  };


  let {multi} = props;
  
  return multi ? renderTextArea() : renderInput()


}

// 函数属性
UcInput.defaultProps={
  type:'text',//类型
  model:null,//双绑
  multi:false,//多行
  label:'',//描述
  style:{}//行间样式
};
UcInput.propsTypes={
  type: propTypes.string,
  model: propTypes.shape({
    name: propTypes.string.isRequired,
    value: propTypes.string.isRequired,
    onChange: propTypes.func.isRequired,
  }),
  multi:propTypes.bool,
  label:propTypes.string,
  style:propTypes.object
};

export default UcInput;